<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="一键入金" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="pic">
      <img src="../../assets/images/gold.png" alt>
    </div>

    <div class="putNum">
        <div>数量</div>
        <input type="text" v-model="num" placeholder="请输入购买数量">
        <span>{{nowD}}</span>
    </div>

    <div @click="buyOne" class="btm" v-if="flag">购买</div>
    <label v-if="flagTwo" for="submit" class="btm">购买</label>

    <div class="formTo">
      <form method="post" action="https://zf.payhonour.com/payment/">
				<input name="merchantid" v-model="msg.merchantid">
				<input name="orderno" v-model="msg.orderno">
				<input name="orderamount" v-model="msg.orderamount">
				<input name="serverbackurl" v-model="msg.serverbackurl">
				<input name="callbackurl" v-model="msg.callbackurl">
				<input name="ordercurrency" v-model="msg.ordercurrency">
				<input name="paytype" v-model="msg.paytype">
				<input name="signtype" v-model="msg.signtype">
				<input name="sign" v-model="msg.sign">
				<input type="submit" name="submit" id="submit">
		  </form>
    </div>
    
  </div>
</template>
<script>
import { NavBar, Toast } from "vant";
export default {
    data(){
        return{
          msg:'',
          num:'',
          flag:true,
          flagTwo:false,
          nowD:'USDT'
        }
    },
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  created(){  
  },
  watch:{
    num(){
      if(this.num >= 15){
      this.begin();
        this.flag = false,
        this.flagTwo = true
      }else{
        Toast('购买数量不能少于15！');
        this.flag = true,
        this.flagTwo = false
      }
    }
  },
  methods:{
    buyOne(){
       if(this.num <=0 || ''){
        Toast('购买数量不能为空！');
        return false;
      }
    },
      //返回
    goBack() {
      this.$router.go(-1);
    },
    begin() {
					var that = this;
						$.ajax({
							type: "get",
							cache: false,
							traditional: true,
							dataType: "json",
							url: 'http://103.112.28.230:8080/endless/userPay/pay',
							xhrFields: {
								withCredentials: true
							},
							data:{
								orderAmount:that.num,
								customerName:'胡图图',
                payType:"bank",
                token:localStorage.getItem('setToken')
							},
							crossDomain: true,
							success: function(data) { 
                console.log(data)
                if(data.code != 200){
                  Toast('登录过期！')
                  that.$router.push({name:'login'})
                }
                that.msg = data.data;
                that.nowD = data.data.ordercurrency
								console.log(that.msg,888)
							}
						});
				},
  }
};
</script>
<style lang="less" scoped>
.pic{
    width: 20%;
    margin: 10vh auto 6vh;
    img{
        width: 100%;
    }
}
.putNum{
    width: 90%;
    margin: 0 auto 18vh;
    display: flex;
    align-items: center;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    div{
        width: 40%;
        text-align: center;
        color: #d6ab6f;
    }
    input{
        width: 60%;
        border: none;
        text-align: center;
    }
}
.btm{
  display: inline-block;
    width: 85%;
    height:34px ;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    background-color: #d6ab6f;
    color: white;
    border-radius: 20px;
    margin: 0 auto 0;
}
.formTo{
  opacity: 0;
  position: fixed;
  left: -1000%;
}
</style>
